import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { changeCity } from '../redux/features/citySlice';
import { changeCinemaList } from '../redux/features/cinemaSlice';
import { useCityList } from '../hooks/useCity';

const City = () => {
  const { list } = useCityList();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  return (
    <>
      <ul>
        {list.map((item) => (
          <li
            key={item.cityId}
            onClick={() => {
              dispatch(changeCity({ id: item.cityId, name: item.name }));
              // 清空影院
              dispatch(changeCinemaList([]));
              navigate('/cinema');
            }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </>
  );
};

export default City;
